import React from 'react';
import add from '../../assets/css/user/add.module.css'
import {Modal, Picker, Toast} from "antd-mobile";
import 'antd-mobile/lib/picker/style/css'
import {province} from '../../components/common/province'
import {localParam} from "../../components/common/function";

const CustomChildren = props => (
    <div onClick={props.onClick}>
        <div style={{ display: 'flex', height: '45px', lineHeight: '45px',position:'relative',borderBottom:0 }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#000', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
);

export default class ModComponent extends React.Component{
    constructor(){
        super();
        this.state={
            name:'',
            cellphone:'',
            province:'',
            city:'',
            area:'',
            address:'',
            isdefault:false,
            isDefaultNum:0
        }
    }
    componentWillMount() {
        this.getData();
    }
    getData(){
        let aid=decodeURIComponent(localParam(this.props.location.search).search.aid);
        fetch('http://vueshop.glbuys.com/api/user/address/info?uid='+localStorage['uid']+'&aid='+aid+'&token=1ec949a15fb709370f')
            .then((res)=>res.json())
            .then(res=>{
                if(res.code===200){
                    this.setState({
                        name:res.data.name,
                        cellphone:res.data.cellphone,
                        province:res.data.province,
                        city:res.data.city,
                        area:res.data.area,
                        address:res.data.address,
                        isDefaultNum:res.data.isdefault,
                    },()=>{
                        if(res.data.isdefault==='1'){
                            this.setState({isdefault:true})
                        }else {
                            this.setState({isdefault:false})
                        }
                    });

                }
            })
    }
    goBack(){
        this.props.history.goBack()
    }
    addName(e){
        this.setState({name:e.target.value})
    }
    addTel(e){
        this.setState({cellphone:e.target.value})
    }
    addAddress(e){
        this.setState({address:e.target.value})
    }
    addDefault(){
        if(this.state.isdefault===false){
            this.setState({isdefault:true,isDefaultNum:1});
        }else {
            this.setState({isdefault:false,isDefaultNum:0});
        }
    }
    preservation(){
        if(this.state.name !== '' && this.state.cellphone !==''){
            const parmas=new URLSearchParams();
            parmas.append('aid',localStorage['aid']);
            parmas.append('uid',localStorage['uid']);
            parmas.append('name',this.state.name);
            parmas.append('cellphone',this.state.cellphone);
            parmas.append('province',this.state.province);
            parmas.append('city',this.state.city);
            parmas.append('area',this.state.area);
            parmas.append('address',this.state.address);
            parmas.append('isdefault',this.state.isDefaultNum);
            fetch('http://vueshop.glbuys.com/api/user/address/mod?token=1ec949a15fb709370f',{
                method:'post',
                body:parmas
            }).then((res)=>res.json())
                .then(res=>{
                    if(res.code===200){
                        Toast.info("修改成功", 1);
                        this.goBack()
                    }else{
                        Toast.info("修改失败", 1);
                    }
                })
        }
    }
    del(){
        const alert = Modal.alert;
        alert('', '确认要删除吗', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确认', onPress: () => {
                    let aid=decodeURIComponent(localParam(this.props.location.search).search.aid);
                    fetch('http://vueshop.glbuys.com/api/user/address/del?uid='+localStorage['uid']+'&aid='+aid+'&token=1ec949a15fb709370f')
                        .then((res)=>res.json())
                        .then(res=>{
                            if(res.code===200){
                                setTimeout(()=>{
                                    this.goBack()
                                },1000)
                            }
                        })
                }}
        ])
    }

    render() {
        return(
            <div className={add.boxAdd}>
                <div>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span>修改收货地址</span>
                    <span className={add.boxSpan} onClick={this.del.bind(this)}>删除</span>
                </div>
                <ul className={add.boxUl}>
                    <li>
                        <span>收货人</span><input type="text" onChange={this.addName.bind(this)} defaultValue={this.state.name}/>
                    </li>
                    <li>
                        <span>联系方式</span><input type="text" onChange={this.addTel.bind(this)} defaultValue={this.state.cellphone}/>
                    </li>
                    <li className={add.picker}>
                        <span>所在地区</span>
                        <Picker
                            extra={this.state.province+this.state.city+this.state.area}
                            data={province}
                            value={this.state.pickerValue}
                            onOk={e => {
                                this.setState({ pickerValue: e});
                                this.setState({ province: e[0]});
                                this.setState({ city: e[1]});
                                if (e[2]){
                                    this.setState({ area: e[2]});
                                } else {
                                    this.setState({ area: ''});
                                }
                            }}
                            onChange={e=>console.log(e)}
                            onDismiss={e => console.log('dismiss', e)}
                        >
                            <CustomChildren></CustomChildren>
                        </Picker>
                    </li>
                    <li>
                        <span>详细地址</span><input type="text" onChange={this.addAddress.bind(this)} defaultValue={this.state.address}/>
                    </li>
                    <li>
                        <span>设置为默认地址</span><input type="checkbox" className={add.boxCheck} checked={this.state.isdefault} onClick={this.addDefault.bind(this)}/>
                    </li>
                </ul>
                <button onClick={this.preservation.bind(this)}>修改</button>
            </div>
        )
    }
}